<template>
  <div class="header-body">
    <ul class="header-body-nav">
      <li class="header-item">Game</li>
      <li class="header-item" @click="refash">主页</li>
      <li class="header-item">游戏</li>
      <li class="header-item">文章</li>
      <li class="header-item" @click="loginshow = true" v-if="!islogin">
        <span class="header-item">登录</span>
      </li>
      <li class="header-item" @click="gotouser" v-if="islogin">
        <span class="header-item">{{user.username}}</span>
      </li>
    </ul>
  </div>
  <login v-if="loginshow" :loginshow="loginshow"/>
</template>

<script>
import login from "../login/index.vue";
import {verify} from "../../api/login";
import {mainStore} from "../../../store";
import {storeToRefs} from 'pinia'

export default {
  name: "header",
  data(){
    return {
      loginshow: false,
      user: {},
      islogin: false,
      token: ''
    }
  },
  components: {
    login
  },
  created() {
  },
  mounted() {
    const { islogin,user,token } = storeToRefs(mainStore())
    this.islogin = islogin
    this.user = user
    this.token = token
    var that = this
    const {loginout} = mainStore()
    verify({ token: that.token }).then((res,err) => {
    }).catch((err)=>{
      loginout()
    })
  },
  methods: {
    closelogin(){
      this.loginshow=false
    },
    refash(){
      this.$router.push({name:'index'})
    },
    gotouser(){
      this.$router.push({path:'/user/mygame'})
    }
  }
}
</script>

<style scoped>
.header-body {
  height: 60px;
  background: radial-gradient( circle at top left, #1c2938,#202530);
  margin-bottom: 10px;
}
.header-body-nav{
  display: flex;
  width: 1500px;
  height: 100%;
  margin: 0 auto;
}
.header-item{
  height: 100%;
  width: 80px;
  line-height: 60px;
  font-size: 20px;
  text-align: center;
  color: #c5cbd8;
}
.header-item:last-child{
  margin-left: auto;
  margin-right: 0;
}

.header-item:hover{
  color: blue;
  cursor: pointer;
}


</style>
